<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>MarsCode AI</title>
    <link rel="stylesheet" href="/css/chat.css" />
  </head>
  <body>
    <div class="chat-container">
      <!-- 头部 -->
      <header class="chat-header">
        <div class="header-left">MarsCode AI</div>
        <div class="header-right">
          <button class="new-chat">New Chat</button>
          <button class="settings">⚙️</button>
          <button class="minimize">—</button>
        </div>
      </header>

      <!-- 活动通知栏 -->
      <div class="activity-banner">
        新年宠粉，推荐赢索尼PS5！ <a href="#" class="banner-link">立即参与→</a>
      </div>

      <!-- 主聊天区域 -->
      <div class="chat-main">
        <!-- 欢迎消息 -->
        <div class="welcome-message">
          <h2>嗨，@<span th:text="${username}">user</span></h2>
          <p>有什么可以帮你的？</p>

          <div class="shortcut-hint">
            你的 AI 编程助手，使用快捷键
            <kbd>Ctrl</kbd> + <kbd>U</kbd> 来与我对话吧！
          </div>

          <!-- 快捷功能区 -->
          <div class="quick-actions">
            <div class="action-card">
              <span class="action-icon">✨</span>
              <h3>生成代码</h3>
              <p>生成一个冒泡排序算法</p>
            </div>
            <div class="action-card">
              <span class="action-icon">✨</span>
              <h3>解释代码</h3>
              <p>/explain 解释一下当前选中函数的功能</p>
            </div>
            <div class="action-card">
              <span class="action-icon">✨</span>
              <h3>注释代码</h3>
              <p>/doc 为当前选中的代码生成注释</p>
            </div>
            <div class="action-card">
              <span class="action-icon">✨</span>
              <h3>生成单测</h3>
              <p>/test 为当前选中的函数生成单测</p>
            </div>
          </div>
        </div>

        <div class="chat-messages">
          <div class="message-template" style="display: none">
            <div class="code-block">
              <div class="code-section">
                <div class="code-comment">### 解释：</div>
                <div class="code-explanation">
                  <div class="code-step">1. public class HelloWorld：</div>
                  <div class="code-content">
                    定义了一个名为 HelloWorld
                    的公共类。在Java中，文件名必须与公共类名相同。
                  </div>

                  <div class="code-step">
                    2. public static void main(String[] args)：
                  </div>
                  <div class="code-content">
                    这是Java程序的入口点。main 方法是Java程序的起始点。
                  </div>

                  <div class="code-step">
                    3. System.out.println("Hello, World!")：
                  </div>
                  <div class="code-content">
                    这行代码用于在控制台输出 "Hello, World!"。System.out
                    是标准输出流。
                  </div>
                </div>

                <div class="code-comment">### 编译和运行：</div>
                <div class="code-explanation">
                  <div class="code-step">
                    1. 将上述代码保存为 HelloWorld.java。
                  </div>
                  <div class="code-step">
                    2. 打开命令行或终端，导航到保存文件的目录。
                  </div>
                  <div class="code-step">3. 使用 javac 命令编译程序：</div>
                  <div class="code-content">javac HelloWorld.java</div>
                  <div class="code-step">4. 使用 java 命令运行程序：</div>
                  <div class="code-content">java HelloWorld</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="chat-input">
        <div class="input-container">
          <span class="command-trigger">✨</span>
          <input type="text" placeholder="输入消息或者'/'来选择指令" />
          <button class="send-button">发送</button>
        </div>
      </div>
    </div>
    <script src="/js/chat.js"></script>
  </body>
</html>
